<!--搜索结果展示 -->
<template>
  <div>
    <span v-show="false">{{ keywords }}{{ pageNum }}</span>
    <el-collapse v-model="activeName" accordion class="elCollapse">
      <el-collapse-item
        v-for="(slm, index) in song.songListMean"
        :key="index"
        :title="slm.name"
        :name="slm.id"
        class="titleItem"
      >
        <div class="demoClass" @click="goToSearchLists(slm)">
          <div class="imgClass">
            <img width="120px" height="120px" :src="slm.coverImgUrl" alt="" />
          </div>
          <div class="textClass">
            {{ slm.description }}
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-pagination
      class="msg-pagination-container"
      :background="isBackground"
      layout="prev, pager, next"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
//引入vuex 以及查询js得到数据

import { mapState } from "vuex";
export default {
  name: "ShowSearchList",
  props: ["keywords"],
  data() {
    return {
      activeName: "1",
      isBackground: true,
      pageNum: 1, //当前页面第几页
      pageSize: 10, //每页有多少条
      total: 300, // 总记录数
    };
  },
  computed: {
    ...mapState(["song"]),
  },
  methods: {
    getSongList() {
      const searchData = {
        keywords: this.keywords,
        pageNum: this.pageNum,
      };
      this.$store.dispatch("song/setSongListMean", searchData);
    },
    handlePageChange(currentPage) {
      this.pageNum = currentPage;
      // 在此刷新数据
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      // 在此刷新数据
    },
    //转向详细歌单
    goToSearchLists(slm) {
      this.$router
        .push({
          name: "alllists",
          query: {
            list: slm,
          },
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
  watch: {
    keywords: {
      handler() {
        this.getSongList();
        this.pageNum = 1;
      },
    },
    pageNum: {
      handler() {
        this.getSongList();
      },
    },
  },
};
</script>


<style scope>
.msg-pagination-container {
  float: right;
  margin-bottom: 20px;
  margin-right: 29px;
}
.msg-pagination-container.is-background .el-pager li {
  /*对页数的样式进行修改*/
  background-color: #ced4da;
  color: #212529;
}
.msg-pagination-container.is-background .btn-next {
  /*对下一页的按钮样式进行修改*/
  background-color: #ced4da;
  color: #212529;
}
.msg-pagination-container.is-background .btn-prev {
  /*对上一页的按钮样式进行修改*/
  background-color: #ced4da;
  color: #212529;
}
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #1d953f;
  color: #f8f9fa;
}
/* 歌词列表css   ---star */
li {
  list-style: none;
}
/* el-divider 修改高度&虚线效果 */
.el-divider--horizontal {
  width: 1120px;
  margin: 18px 0;
  background: 0 0;
  border-top: 3px solid #ced4da;
}

.el-divider--vertical {
  width: 2px;
}

.titleDemoOne {
  font-weight: bold;
  font-size: 14px;
  margin-left: 40px;
}
.titleDemoTwo {
  font-weight: bold;
  font-size: 14px;
  margin-left: 480px;
}
.titleDemoThr {
  font-weight: bold;
  font-size: 14px;
  margin-left: 260px;
}
.songDemo {
  /* position: fixed;
  left: 570px; */
  margin-left: 15px;
}
.nameDemo {
  position: absolute;
  left: 600px;
}
.alDemo {
  position: absolute;
  left: 870px;
}
/* 点击列表css */
.liDemo:hover {
  color: #1d953f;
  font-size: 17px;
  cursor: hand;
}
/* 歌词列表css   ---end */

/* 歌单列表 */
.elCollapse {
  background: #fff;
  font-size: 26px;
  border: 2px solid #ced4da;
  margin-top: 20px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.el-collapse-item__header {
  height: 65px;
  font-size: 14px;
}
.titleItem :hover {
  font-size: 14px;
  color: #1d953f;
}
.demoClass {
  border-radius: 5px;
  height: 120px;
  border: 1px solid #1d953f;
  padding: 10px;
}
.imgClass {
  float: left;
}
.textClass {
  margin-left: 10px;
  width: 900px;
  height: 120px;
  float: left;
  overflow: auto;
  text-indent: 15px;
}
</style>
